<template>
  <div ref="chartRef" id="main" :style="{ width: '280px', height: '210px' }"></div>
</template>
<script lang="js">
import * as echarts from 'echarts';
export default {
  name: 'bar',
  data() {
    return {};
  },
  mounted() {
    // 基于准备好的dom，初始化echarts实例
    var myChart = echarts.init(document.getElementById('main'));
    // 绘制图表

    const echartsdata = [
      { name: '＜0.5h', value: 20 },
      { name: '0.5~1h', value: 30 },
      { name: '1~1.5h', value: 60 },
      { name: '1.5~3h', value: 120 },
      { name: '＞3h', value: 120 },
    ];
    const color = ['#8bc353', '#e09f31', '#30e8bb', '#FFDC4C', '#46a6ff'];
    const max = Math.max(...echartsdata.map((item) => item.value));
    const option = {
      backgroundColor: '#0c182d',
      grid: {
        top: '1px',
        bottom: '15%', //也可设置left和right设置距离来控制图表的大小
        left: '1px',
        right: '1px',
      },
      angleAxis: {
        show: false,
        clockwise: true,
        max: max + max / 3,
      },
      radiusAxis: {
        type: 'category',
        data: echartsdata.map((item) => {
          // return item.name + ':' + '(' + (item.value / sum * 100).toFixed(1) + '%)'
          return item.name;
        }),
        z: 10,
        axisLine: {
          show: false,
        },
        axisTick: {
          show: false,
        },
        axisLabel: {
          interval: false,
          color: '#fff',
          align: 'right',
          margin: 10,
        },
      },
      polar: {
        show: false,
        center: ['50%', '40%'],
      },
      series: [
        {
          type: 'bar',
          data: echartsdata.map((item, index) => {
            return {
              value: item.value,
              name: item.name,
              itemStyle: {
                color: color[index],
              },
            };
          }),
          label: {
            show: false,
            position: 'top',
          },
          barWidth: 10,
          coordinateSystem: 'polar',
        },
      ],
    };
    myChart.setOption(option);
  },
};
</script>
